<template>
  <div class="amap">

    <div id="mapContainer" style="width: 70%; height: 500px; " />
    <div class="right">
      <el-table
        ref="tableRef"
        :data="companyList"
        style="width: 100%"
        height="480"
        highlight-current-row
        :show-header="false"
        @current-change="handleCurrentChange"
      >
        <el-table-column
          prop="name"
          width="180"
        />
      </el-table>
      <el-slider v-model="value1" :format-tooltip="showToopTip" @change="changeRedus" />
    </div>
    <div class="footer">

      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="submitForm()">批量更新</el-button>
    </div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import { getCompanyList, setCompanyList } from '@/api/attendance'
import { Message } from 'element-ui'
export default {
  data() {
    return {
      map: null, // 地图对象
      marker: null, // 标记对象
      loaded: false,
      infoWindow: null, // 弹窗对象
      companyList: [],
      currentRow: null,
      circle: null,
      value1: 0
    }
  },
  async created() {
    // this.initMap()
    const res = await getCompanyList()
    console.log('getCompanyList', res)
    this.companyList = res
    //

    this.value1 = res[0].radius / 10
    this.currentRow = res[0]

    this.$nextTick(() => {
      console.log('this.$refs.tableRef', this.$refs.tableRef)

      this.initMap()// 加载地图
      this.$refs.tableRef.setCurrentRow(this.companyList[0])// 设置默认选中（会报错，研究中）
      //   this.handleCurrentChange(this.companyList[0])
    })
    console.log('create')
  },
  async mounted() {
    // AMapLoader.reset()// 在加载地图前加一个reset方法 解决报错
    // console.log(11, this.companyList[0])
    // this.$refs.tableRef.toggleRowSelection(this.companyList[0], true)
  },
  methods: {
    async submitForm() {
      console.log('this.currentRow', this.currentRow)
      console.log('this.companyList', this.companyList)
      await setCompanyList({ 'list': this.companyList })
      Message.success('批量更新成功')
      this.closeDialog()
    },
    async initMap() {
      await AMapLoader.load({
        key: 'b0e7649c2a1ad84e5dc0a89660c1a1e8', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Marker', 'AMap.InfoWindow', 'AMap.Circle', 'AMap.LngLat'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        callback: 'onAPILoaded' // 回调函数
      })

      //   new window.AMap.Map()
      this.map = new window.AMap.Map('mapContainer', { // 生成底图在mapContainer这个div里
        center: this.currentRow.point, // 初始中心点坐标
        zoom: 19 // 初始缩放级别
      })

      // 添加圆形范围
      this.circle = new window.AMap.Circle({
        center: new window.AMap.LngLat(this.currentRow.point[0], this.currentRow.point[1]), // 圆心位置
        radius: this.currentRow.radius / 10, // 半径
        // strokeColor: '#FF33FF', // 线颜色
        strokeOpacity: 1, // 线透明度
        strokeWeight: 3, // 线宽
        fillColor: '#1791fc', // 填充色
        fillOpacity: 0.25 // 填充透明度
      })

      // 将圆形添加到地图
      this.map.add(this.circle)

      this.addMarker(this.currentRow)// 添加标记点的方法
    },

    addMarker(item) {
      this.marker = new window.AMap.Marker({ // 新增一个标记点
        position: item.point
      })
      this.marker.setMap(this.map) // 放在map这个对象里面
      // 顺便新增一个点击标记点出来的窗口
      this.infoWindow = new window.AMap.InfoWindow({ // 新增一个window窗口
        content: item.name, // 添加你想要显示的文字描述
        offset: new window.AMap.Pixel(0, -30) // 设置信息窗体偏移量，使其显示在标记点正上方
      })

      // 点击标记点时显示信息窗体
      this.marker.on('click', () => {
        this.infoWindow.open(this.map, this.marker.getPosition())
      })
    },
    /** 回调函数 地图渲染好时触发 不需要可以删掉 */
    onAPILoaded() {
      this.loaded = true
      console.log('执行对地图的其他操作')
      // 在这里可以执行其他与地图相关的操作
    },
    closeDialog() {
      this.$emit('closeDialog')
    },
    handleCurrentChange(val) {
      this.currentRow = val
      this.value1 = val.radius / 10

      //   this.map = new window.AMap.Map('mapContainer', { // 生成底图在mapContainer这个div里
      //     center: val.point, // 初始中心点坐标
      //     zoom: 13 // 初始缩放级别
      //   })

      //   this.addMarker(val)
      this.map && this.map.setCenter(new window.AMap.LngLat(val.point[0], val.point[1]))
      this.circle.setCenter(new window.AMap.LngLat(val.point[0], val.point[1]))
      this.circle.setRadius(val.radius / 10)
      this.addMarker(val)
    },
    showToopTip(val) {
      if (val === 100) {
        return '1.0公里内可打卡'
      }
      return `${val * 10}米内可打卡`
    },
    changeRedus(val) {
      console.log('val', val)
      this.currentRow.radius = val * 10
      console.log('this.circle.radius', this.circle)
      this.circle.setRadius(val)
    }
  }
}
</script>

<style scoped>

    .amap{
        display: flex;
        flex-wrap: wrap;
    }
    .right{
        padding-left: 20px;
    }
    .footer{
        width: 100%;
        height: 100px;
        text-align: right;
    }
</style>
